<template>
  <div class="nav" :class="{ fix: scrollTag }">
    <div class="container">
      <div class="nav-logo">
        <router-link to="/"
          ><img src="./logo_app.png" alt="vmallogo"
        /></router-link>
      </div>
      <nav class="nav-list">
        <a href="#">华为专区</a>
        <a href="#">鸿蒙智联</a>
        <a href="#">莫塞尔</a>
        <a href="#">华为智选</a>
        <a href="#">HarmonyOS</a>
        <a href="#">特惠企采</a>
        <a href="#">教育购</a>
      </nav>
      <div class="nav-search">
        <span class="iconfont icon-search"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "XNav",
  data() {
    return {
      scrollTag: false,
    };
  },
  mounted() {
    let _this = this;
    window.addEventListener("scroll", function () {
      let top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      // console.log(top)
      if (top <= 36) {
        _this.scrollTag = false;
      } else {
        _this.scrollTag = true;
      }
    });
  },
};
</script>

<style lang="less" scoped>
.fix {
  position: fixed;
  z-index: 1999;
}
.nav {
  background-color: #fff;
  min-width: 100%;
  width: max-content;
  top: 0px;
  left: 0px;

  .container {
    width: 1200px;
    height: 74px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    .nav-logo {
      img {
        width: 103px;
        height: 74px;
      }
    }
    .nav-list {
      display: flex;
      width: 808px;
      padding-right: 150px;
      justify-content: space-around;
      a {
        color: #000;
        font-size: 16px;
      }
    }
    .nav-search {
      span {
        font-size: 30px;
        color: rgb(194 194 194);
      }
    }
  }
}
</style>
